<template>
    <!-- 新增修改对话框 -->
     <el-dialog v-model="open" :title="title" width="500" :close-on-click-modal="false">
         <el-form ref="formRef" :model="form" label-width="80px">
             <el-form-item label="用户名称" prop="title"
                 :rules="[ { required: true, message: '该值不能为空', trigger: 'blur'}]">
                 <el-input v-model="form.nickName" placeholder="请输入帖子标题" />
             </el-form-item>

             <el-form-item label="用户头像" prop="content"
                 :rules="[ { required: true, message: '该值不能为空', trigger: 'blur'}]">
                 <el-input v-model="form.avatar" placeholder="请输入帖子内容" />
             </el-form-item>

             <el-form-item label="用户签名" prop="src"
                 :rules="[ { required: true, message: '该值不能为空', trigger: 'blur'}]">
                 <el-input v-model="form.sign" placeholder="请输入图片" />
             </el-form-item>
             <el-form-item label="用户主页背景图片" prop="src"
                 :rules="[ { required: true, message: '该值不能为空', trigger: 'blur'}]">
                 <el-input v-model="form.homeimage" placeholder="请输入图片" />
             </el-form-item>
             <el-form-item label="用户性别" prop="src"
                 :rules="[ { required: true, message: '该值不能为空', trigger: 'blur'}]">
                 <el-input v-model="form.sex" placeholder="请输入图片" />
             </el-form-item>
             <el-form-item label="用户状态" prop="src"
                 :rules="[ { required: true, message: '该值不能为空', trigger: 'blur'}]">
                 <el-input v-model="form.status" placeholder="请输入图片" />
             </el-form-item>

           <!--  <el-form-item  label="图片" prop="src">
                 <el-upload
                     class="avatar-uploader"
                     :action="imageUploadUrl"
                     :headers="data.header"
                     :data="data1.ossdata"
                     name="imgFile"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload"
                   >
                     <img  :src="form.src" class="avatar" />
                   </el-upload>
             </el-form-item> -->

             <!-- <el-form-item label="状态" prop="status"
                 :rules="[ { required: true, message: '该值不能为空', trigger: 'blur'}]">
                 <el-radio-group v-model="form.status">
                     <el-radio v-for="dict in sys_normal_disable" :key="dict.value"
                         :label="dict.value">{{dict.label}}</el-radio>
                 </el-radio-group>
             </el-form-item> -->
             <!-- <el-form-item label="备注" prop="remark">
                 <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
             </el-form-item> -->
         </el-form>
         <template #footer>
             <div class="dialog-footer">
                 <el-button type="primary" @click="submitForm">确 定</el-button>
                 <el-button @click="cancel">取 消</el-button>
             </div>
         </template>
     </el-dialog>
</template>

<script lang="ts" setup>
    import { reactive, ref,getCurrentInstance, ComponentInternalInstance  } from 'vue';
    import { type FormRules, type FormInstance, ElMessage, type UploadFile  } from 'element-plus';
    import {appMyRespEdit,appMyResp} from '@/types/app/my'
    import {postinformation,editpost} from '@/api/app/my/type'
    import { getToken } from '@/utils/auth';

    // 获取当前vue3的页面this对象转换为proxy代理，查询 sys_dict_data表中的值
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    const token=getToken();

    //配置请求头的令牌
    const header={
        header: {
            'Authorization': token
        }
    } ;

    //声明子组件的自定义事件 https://cn.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits
    const emit = defineEmits(['refreshDataList']);

    //自己的定义额外参数
    const data = reactive({
        header: {
            'Authorization': token
        },
        ossdata: {
            fatherPath:'images'
        }
    });
    const open = ref(false);
    //得到数据表单form样式对象
    const formRef =ref<FormInstance>();
    //定义表单对象
    const form = ref<appMyRespEdit>({
        userId:undefined,
        nickName:'',
        avatar:'',
        sign:'',
        homeimage:'',
        sex:undefined,
        status:undefined,
    })
    //表单验证
    const rules = reactive<appMyRespEdit>({
        nickName:[
            { required: true, message: '该值不能为空', trigger: 'blur'}
        ]
    })

    //对话框保存按钮
    const submitForm = () => {
        formRef.value.validate((valid: boolean) => {
            //验证不成功
           	if (!valid) {
           		return false;
           	}

            //修改
            if(form.value.userId){
                editpost(form.value).then(resp=>{
                    ElMessage.success({
                        message: '修改成功',
                        duration: 500,
                        onClose: () => {
                            //关闭弹窗
                            open.value = false;
                            //调用重新查询数据操作
                            emit('refreshDataList');
                        }
                    });

                });
            }
    //         else{
    //             //新增
    //             addApi(form.value).then(resp=>{
    //                 ElMessage.success({
    //                     message: '新增成功',
    //                     duration: 500,
    //                     onClose: () => {
    //                         //关闭弹窗
    //                         open.value = false;
    //                         //调用重新查询数据操作
    //                         emit('refreshDataList');
    //                     }
    //                 });

    //             });
    //         }

        });

    };

    //对话框取消按钮
    const cancel = () => {
        open.value = false;
        resetFrom();
    };

    // 重置表单
    const resetFrom = () => {
        // 清空表单样式
        if (formRef.value){
            formRef.value.resetFields();
        }
        // 重置值
        form.value = {
            userId:undefined,
            nickName:'',
            avatar:'',
            sign:'',
            homeimage:'',
            sex:undefined,
            status:undefined,
        };
    };

    //判断如果是修改操作，就要查询数据库，还原数据,要暴露出去
    const init = (id?: number,pid?:number,componentType?:number) => {

        // 重置表单数据
        resetFrom();
        // id 存在则为修改
        if (id) {
            postinformation(id).then(resp=> {
                form.value=resp.data;
            });
        }
    //     else{
    //         //新增
    //         if(pid!=null){
    //             //查找上级节点的信息
    //             form.value.tid=pid;
    //             if(pid===0){
    //                 form.value.componentType=3;
    //                 form.value.tname='根节点';
    //             }else{
    //                 //查询id的值
    //                 getTypeByIdApi(pid).then(resp=> {
    //                     console.log(resp);
    //                     form.value.tname=resp.data.typeName;
    //                     //为了解决部位上传图片显示组件判断问题
    //                     if(componentType===0){
    //                         form.value.componentType=0;
    //                     }else{
    //                         form.value.componentType=resp.data.componentType;
    //                     }

    //                 });
    //             }
    //         }
    //     }

        open.value = true;
    };

</script>

<style>
</style>
